<template>
  <div>
    <el-upload
      ref="fundodooUploadRef"
      class="fundodoo-upload"
      :action="actionUrl"
      name="fundodooFile"
      :limit="limit"
      :accept="accept"
      :headers="headers"
      :data="data"
      :multiple="multiple"
      :show-file-list="showFileList"
      :file-list="fileList"
      :list-type="listType"
      :auto-upload="autoUpload"
      :on-exceed="handleExceed"
      :before-upload="handleBeforeUpload"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="fundodooUploadAction">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过<em>2M</em></div>
    </el-upload>
  </div>

</template>

<script>
import { beforeUploadAttachment, addAttachment } from '@/api/attachment'
import { getToken } from '@/utils/auth'

export default {
  name: 'FundodooUpload',
  props: {
    limit: {
      type: Number,
      default: 5
    },
    accept: {
      type: String,
      default: 'png,jpg,jpeg,webp,ico'
    },
    multiple: {
      type: Boolean,
      default: true
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    listType: {
      type: String,
      default: 'picture'
    },
    autoUpload: {
      type: Boolean,
      default: false
    },
    cid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      headers: {
        type: Object,
        default: null
      },
      data: {
        type: Object,
        default: null
      },
      fileList: [],
      actionUrl: ''
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    handleBeforeUpload(file) {
      // 文件大小限制
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('不得超过2M')
        return isLt2M
      }
      // 文件类型限制
      const name = file.name ? file.name : ''
      const ext = name
        ? name.substr(name.lastIndexOf('.') + 1, name.length)
        : true
      const isExt = this.accept.indexOf(ext) < 0
      if (isExt) {
        this.$message.error('请上传正确的格式类型')
        return !isExt
      }
    },
    fundodooUploadAction() {
      beforeUploadAttachment().then(res => {
        this.actionUrl = res.data.url
        const type = res.data.type
        const tmpCid = this.cid
        if (type === 1) {
          // LOCAL(1)
          this.actionUrl = process.env.VUE_APP_BASE_API + res.data.url
          this.headers = {
            'fundodoo-auth-token': getToken(),
            'pid': tmpCid
          }
        } else if (type === 2) {
          // QINIU(2)
        } else if (type === 3) {
          // OSS(3)
        } else if (type === 4) {
          // COS(4)
        }
        this.$nextTick(() => {
          this.$refs.fundodooUploadRef.submit()
        })
      })
    },
    handleProgress(event, file, fileList) {
      fileList.forEach((element, index) => {
        if (element.uid === file.uid) {
          // 更新这个uid下的进度
          const progress = Math.floor(event.percent)
          // 防止上传完接口还没有返回成功值，所以此处给定progress的最大值为99，成功的钩子中再置为100
          element.progress = progress === 100 ? 99 : progress
        }
      })
    },
    handleSuccess(res, file, fileList) {
      fileList.forEach((element, index) => {
        if (element.uid === file.uid) {
          element.progress = 100
        }
      })
      const data = {}
      data.pid = res.data.pid
      data.attName = res.data.attName
      data.attDir = res.data.attDir
      data.sattDir = res.data.sattDir
      data.attSize = res.data.attSize
      data.attType = res.data.attType
      data.imageType = res.data.imageType

      addAttachment(data).then(res => {
        this.$message.success('文件上传成功')
      })
    },
    handleError(er, file, fileList) {
      fileList.forEach((element, index) => {
        if (element.uid === file.uid) {
          fileList.splice(index, 1) // 上传失败删除该记录
          this.$message.error('文件上传失败')
        }
      })
    },
    handleExceed(files, fileList) {
      if (fileList.length > 5) {
        this.$message.error('最多允许上传5个文件')
        return false
      }
    },
    refreshAttachment(obj, node, nodeObj) {
      debugger
    }

  }
}
</script>

<style scoped>

</style>

